<template>
	<BaseContainer>
		<el-card class="box-card">
			<template #header>
				<html-label title="归档日期">
					<DateBetween dateType="datetimerange" format="YYYY-MM-DD HH:mm:ss" valueFormat="YYYY-MM-DD HH:mm:ss" v-model="archiveTimeBetween" @update:modelValue="handleChange"></DateBetween>
				</html-label>
			</template>
			<el-tabs tab-position="top" type="border-card" v-model="activeName" @tab-change="handleChange">
				<el-tab-pane v-for="(item, index) in tabList" :key="index" :label="item.label" :name="item.value">
					<component :is="components[item.value]" v-if="activeName == item.value" :query="{...item.query,archiveTimeBetween}" :key="archiveTimeBetween"></component>
				</el-tab-pane>
			</el-tabs>
		</el-card>
	</BaseContainer>
</template>

<script setup lang="ts">
import experts from './components/experts/index.vue'
import oldman from './components/oldman/index.vue'
import oldmanHome from './components/homeOldman/index.vue'
import serviceFacility from './components/serviceFacility/index.vue'
import serviceOrg from './components/serviceOrg/index.vue'
import serviceOrgHome from './components/serviceOrgHome/index.vue'
import practitioner from './components/practitioner/index.vue'
import ServiceProvider from './components/ServiceProvider/index.vue'
import volunteer from './components/volunteer/index.vue'
import DateBetween from '@/views/aplid/DateBetween/index.vue'
import { useCommonStore } from '@/stores/common'

const { setGloablParams,setMoreSearch } = useCommonStore()
const route = useRoute()

const components = {
	experts,
	oldman,
	serviceFacility,
	serviceOrg,
	serviceOrgHome,
	practitioner,
	ServiceProvider,
	volunteer,
	oldmanHome
}
const tabList = [
	{ label: '养老专家', value: 'experts' ,apiStr:'view_dpProfessor_page'},
	{ label: '服务对象', value: 'oldman', query: { seniorLiving: 2 }, apiStr: 'view_dpServiceObject_page' },
	{ label: '养老服务设施', value: 'serviceFacility', apiStr: 'dpServiceFacility_page' },
	{ label: '养老机构', value: 'serviceOrg', apiStr: 'view_dpServiceOrgBase_page' },
	{ label: '养老服务组织', value: 'serviceOrgHome', apiStr: 'dpServiceOrgHome_page' },
	{ label: '养老从业人员', value: 'practitioner', apiStr: 'view_dpFoundationPractitioners_page' },
	{ label: '养老行业服务商', value: 'ServiceProvider', apiStr: 'view_dpServiceProvider_page' },
	{ label: '志愿者', value: 'volunteer', apiStr: 'view_dpVolunteer_page' },
	{ label: '居家老人', value: 'oldmanHome', query: { seniorLiving: 1 },apiStr:'view_dpServiceObjectHome_page' },
]

const activeName = ref('experts')
const archiveTimeBetween:any = ref('')

const handleChange = () => {
	setMoreSearch({
		params: {
			archiveTimeBetween: archiveTimeBetween.value,
		},
	})
  setGloablParams({
    archiveTimeBetween: archiveTimeBetween.value,
  })
}

onMounted(() => {
	archiveTimeBetween.value = route.query.time
	const {value} = tabList.filter((item) => item.apiStr == route.query.apiIndex)[0] || {}
	console.log('dsd',value)
	activeName.value = value
	handleChange()
})
onUnmounted(() => {
	setMoreSearch({})
	setGloablParams({})
})
</script>

<style scoped></style>
